<template>
	<view>
		<view class="rider_list">
			<view 
				class="rider_item"
				v-for="(it_r,in_r) in pickuperList"
				:key="in_r"
			>
				<view class="l-wrap"  @click="handleChoosePickuper(it_r,in_r)">
					<view v-if="!it_r.choosed" class="icon" ><image src="@/static/imgs/icons/choose0-icon.png" mode="aspectFill"></image></view>
					<view v-else class="icon"><image src="@/static/imgs/icons/choose1-icon.png" mode="aspectFill"></image></view>
					<text class="name ellispsis1">{{it_r.passengerName}}</text>
					<text class="type">{{it_r.typeName}}</text>
					<text class="ID">{{it_r.certificateNumber}}</text>
				</view>
				<view class="edit-icon" @click="handleGoBusAddRider(it_r)"><image src="@/static/imgs/icons/edit-icon.png" mode="aspectFill"></image></view>
			</view>
		</view>
		
		<view class="confirm-btn-wrap">
			<view class="confirm-btn tp-w690">
				<view class="btn confirm" @click="handleConfirmChoosedPickuper">确定</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				serviceType: '', // (去程|返程)
				title: '',
				pickuperList: [],
				curRiderPersonInfo: {}
			};
		},
		onLoad(opt) {
			this.serviceType = opt && opt.serviceType
		},
		onShow() {
			this.getRiderList()
		},
		methods: {
			getRiderList() { // onshow 获取当前添加的接送人完整信息
				this.pickuperList = JSON.parse(JSON.stringify(this.$store.getters.getRiderList))
				let obj = this.$store.getters.getPickuperListToAndFor || {}
				let arr = obj[this.serviceType] || []
				arr.forEach((it_a,in_a) => {
					this.pickuperList.forEach((item, index) => {
						if (it_a.id===item.id &&  ((it_a.in && it_a.in.destination) || (it_a.out && it_a.out.destination))) {
							this.pickuperList.splice(index, 1)
						}
					})
				})
				
				this.pickuperList.map(it_ => {
					it_.choosed = false
				})
				this.updateRiderList()
			},
			handleChoosePickuper(item,index) {
				this.pickuperList[index].choosed = !this.pickuperList[index].choosed
				// this.pickuperList.forEach(it_ => {
				// 	it_.choosed = false
				// 	if (item.id===it_.id) {
				// 		return it_.choosed = true
				// 	}
				// })
			},
			handleGoBusAddRider(item) {
				uni.navigateTo({
					url: '../travel/bus.addRider?id='+ item.id
				});
			},
			// 确定 
			handleConfirmChoosedPickuper() {
				let arr = this.pickuperList.filter(em => em.choosed)
				let arrTF = this.$store.getters.getPickuperListToAndFor[this.serviceType] || []
				let oldArr = [...arrTF, ...arr]
				// 去重
				const obj = {};
				oldArr = oldArr.reduce((cur,next)=>{
				       obj[next.id] ? '' : obj[next.id] = true && cur.push(next)
				
				       return cur;
				
				},[])
				this.$store.commit('upPickuperListToAndFor', {[this.serviceType]:oldArr})
				this.$store.commit('upCurPickuperInfo', arr)
				// var num=0
				// this.pickuperList.forEach((item,index) => {
				// 	if(item.choosed) {
				// 		let arr = this.$store.getters.getPickuperListToAndFor[this.serviceType] || []
				// 		console.log(arr);
				// 		if (!arr.length) {
				// 			arr.push(item)
				// 		} else {
				// 			arr.push(item)
				// 		}
				// 		console.log(arr);
				// 		this.$store.commit('upPickuperListToAndFor', {[this.serviceType]:arr})
				// 		this.$store.commit('upCurPickuperInfo', item)
						
				// 	}
				// })
				uni.navigateBack({delta: 1});
			},
			updateRiderList() {
				const storage = this.$store.getters.getRiderList
				const arr = this.pickuperList
				arr.forEach((it_a,in_a) => {
					storage.forEach((it_s,in_s) => {
						if (it_a.id===it_s.id) {
							return it_a.choosed = true
						}
					})
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
.rider_list {
	width: 690rpx;
	margin: 20rpx auto 98rpx;
	border-radius: 12rpx;
	background-color: #fff;
	overflow: hidden;
	.rider_item {
		height: 100rpx;
		display: flex;
		margin: 0 30rpx;
		align-items: center;
		justify-content: space-between;
		border-bottom: 1px solid #ebebeb;
		&:last-child {
			border-bottom: none;
		}
		.l-wrap {
			display: flex;
			align-items: center;
			font-size: 28rpx;
			.name {
				font-size: 30rpx;
				padding: 0 10rpx 0 20rpx;
				width: 120rpx;
			}
			.type {
				padding-right: 40rpx;
			}
			.icon {
				display: inline-block;
				height: 30rpx;
				width: 30rpx;
			}
		}
	}
}
.confirm-btn-wrap {
	height: 98rpx;
	background-color: #fff;
	position: fixed;
	left: 0;
	right: 0;
	bottom: 0;
	
	.confirm-btn {
		display: flex;
		justify-content: space-between;
		.btn {
			height: 72rpx;
			line-height: 72rpx;
			text-align: center;
			width: 100%;
			margin:13rpx auto;
			color: #fff;
			font-size: 32rpx;
			border-radius: 12rpx;
			&.confirm {
				background-color: $blue;
			}
			&.add {
				background-color: $yellow;
			}
		}
	}
}
</style>
